<template>
    <div class="goods-supplied">
        <div class="from-box">
            <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
            >
                <el-form-item>
                    <el-cascader
                        v-model="formInline.catid"
                        :options="cat_ls"
                        :props="propsdata"
                        @change="handleChange"
                        placeholder="类别"
                        size="mini"
                    ></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-select
                        v-model="formInline.storeid"
                        placeholder="仓库"
                        @change="handleChange"
                        size="mini"
                    >
                        <el-option
                            v-for="item in store_ls"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select
                        v-model="formInline.is_stock"
                        placeholder="产品"
                        @change="handleChange"
                        size="mini"
                    >
                        <el-option
                            v-for="item in gdck_ls"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetFun" size="mini">重置搜索</el-button>
                </el-form-item>
                <el-form-item v-show="!is_add && !isDrawerOpen">
                    <el-button type="primary" @click="inlineAdd(1)" size="mini"
                        >添加供货产品</el-button
                    >
                </el-form-item>
                <el-form-item v-show="is_add">
                    <el-button type="primary" @click="inlineAdd(2)" size="mini"
                        >确认添加</el-button
                    >
                </el-form-item>
                <el-form-item v-show="is_add">
                    <el-button @click="inlineAdd(3)" size="mini">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="good-box">
            <el-checkbox-group v-model="checkedCities">
                <div
                    class="good-row"
                    :class="is_add ? 'good-row-add' : ''"
                    v-for="item in goodsList"
                    :key="item.id"
                    @click="handleCheckedCitiesChange(item.id)"
                >
                    <div class="checkbox" v-show="is_add">
                        <el-checkbox
                            :key="item.id"
                            :label="item.id"
                        ></el-checkbox>
                    </div>
                    <div class="img-box">
                        <img :src="item.imgs ? item.imgs : goodsImg" alt="" />
                    </div>
                    <div class="info-box">
                        <div class="info-top">
                            <div class="title">
                                <span>{{ item.title }}</span>
                            </div>
                            <div class="kuc-box">
                                <span>库存：{{ item.qty }}</span>
                            </div>
                        </div>
                        <div class="info-bottom">
                            <span>{{ item.cost_bw }}</span>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
import config from "../../js/conf/Config.js";
import staticConst from "../../js/const/StaticConst.js";

export default {
    name: "goodsSupplied",
    props: {
        isDrawerOpen: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
            checkedCities: [],
            is_add: false,
            propsdata: {
                children: "son",
                label: "title",
                value: "id",
                expandTrigger: "hover",
                checkStrictly: true,
            },
            formInline: {
                catid: "",
                storeid: "",
                is_stock: "",
                suppid: "",
                page: 1,
                pfrom: 0,
                pnum: 20,
            },
            pfrom: 0,
            gdck_id: "",
            store_id: "",
            cat_id: "",
            is_soll: false,
            goodsList: [], //产品列表
            gdck_ls: [
                {
                    id: "0",
                    name: "全部产品",
                },
                {
                    id: "1",
                    name: "有货产品",
                },
                {
                    id: "2",
                    name: "无货产品",
                },
                {
                    id: "3",
                    name: "上架产品",
                },
                {
                    id: "4",
                    name: "下架产品",
                },
                // {
                //     id: "101",
                //     name: "已选产品",
                // },
            ], //产品状态列表

            store_ls: [], //仓库列表

            cat_ls: [], //分类列表
        };
    },
    methods: {
        initData(id) {
            this.suppid = id;
            this.resetFun();
            this.getCatlsDataFun();
        },
        // 全选
        selectallFun(val) {
            let checkedCities = this.checkedCities;
            if (val) {
                if (this.goodsList.length > 0) {
                    this.goodsList.map((v) => {
                        checkedCities.push(v.id);
                    });
                }
                checkedCities = new Set(checkedCities);
                this.checkedCities = [...checkedCities];
            } else {
                this.checkedCities = [];
            }
            this.$emit("uncheckall", val, String(this.checkedCities.length));
        },
        // 单选
        handleCheckedCitiesChange(val) {
            let is_index = this.checkedCities.indexOf(val) > -1;
            if (is_index) {
                this.checkedCities.map((v, i) => {
                    if (val == v) {
                        this.checkedCities.splice(i, 1);
                    }
                });
            } else {
                this.checkedCities.push(val);
            }
            let checkedCount = this.checkedCities.length;
            let checkAll = checkedCount === this.goodsList.length;
            this.$emit("uncheckall", checkAll, checkedCount);
        },
        // 重置
        resetFun() {
            this.formInline = {
                catid: "",
                storeid: "",
                is_stock: "",
                page: 1,
                pfrom: 0,
                pnum: 20,
            };
            this.pfrom = 0;
            this.goodsList = [];
            this.checkedCities = [];
            this.is_soll = false;
            this.getgoodinfoFlow();
            this.$emit("uncheckall", false, "0");
        },
        // 滚动加载
        handlerScroll() {
            if (this.is_soll) return;
            this.pfrom++;
            this.getgoodinfoFlow();
        },
        // 切换添加状态
        async inlineAdd(type) {
            if (type == 1) {
                this.is_add = true;
                this.resetFun();
                this.$emit("changeAddStatus", this.is_add);
            } else if (type == 2) {
                let url = config.CG_SUPP_SUPP_GD_BIND;
                let param = {
                    gdids: this.checkedCities,
                    suppid: this.suppid,
                };
                let res = await this.$api({ url: url, data: param });
                if (res.status == 1) {
                    this.is_add = false;
                    this.resetFun();
                    this.$emit("changeAddStatus", this.is_add);
                }
            } else if (type == 3) {
                this.is_add = false;
                this.resetFun();
                this.$emit("changeAddStatus", this.is_add);
            }
        },
        // 触发搜索
        handleChange() {
            this.pfrom = 0;
            this.goodsList = [];
            this.is_soll = false;
            this.getgoodinfoFlow();
        },
        // 获取列表数据
        async getgoodinfoFlow() {
            let url = config.GH_GOODS_LIST;
            let param = Object.assign({}, this.formInline);
            param.suppid = this.is_add ? "" : this.suppid;
            param.pfrom = this.pfrom * param.pnum;
            param.catid = param.catid
                ? param.catid[param.catid.length - 1]
                : "";
            param.ch = this.is_add ? "nobind" : undefined;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.goodsInfo) {
                this.goodsList = this.goodsList.concat(res.data.goodsInfo);
                if (this.is_add) {
                    this.$emit("uncheckall", false, null);
                }
            } else {
                this.is_soll = true;
            }
            if (res.status == 1 && res.data.store_ls) {
                this.store_ls = res.data.store_ls || [];
            }
        },
        // 获取分类列表
        async getCatlsDataFun(item = null) {
            let url = config.GDPRE_CAT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data && res.data.length > 0) {
                this.cat_ls = res.data || [];
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.goods-supplied {
    ::v-deep.demo-form-inline {
        .el-form-item {
            margin-bottom: 0 !important;
        }
        .el-select {
            width: 200px;
        }
    }
    .good-box {
        // height: 500px;
        // overflow: auto;
        .good-row {
            display: flex;
            border-bottom: 1px #eeeeee solid;
            padding-bottom: 10px;
            position: relative;
            &.good-row-add {
                padding-left: 20px;
                cursor: pointer;
                &:hover {
                    background: #f9f9f9;
                }
            }
            ::v-deep.checkbox {
                position: absolute;
                top: 35px;
                left: 5px;
                pointer-events: none;
                .el-checkbox__label {
                    display: none;
                }
            }
            .img-box {
                margin-right: 20px;
                margin-top: 10px;
                margin-left: 10px;
                width: 80px;
                height: 80px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                }
            }
            .info-box {
                .info-top {
                    .title {
                        font-size: 16px;
                    }
                    .kuc-box {
                        font-size: 14px;
                        color: #9b9b9b;
                    }
                }
                .info-bottom {
                    margin-top: 10px;
                    font-size: 14px;
                    color: #fa4848;
                }
            }
        }
    }
}
</style>